<template>
	<view class="">
		<view class="search-box">
			<image
				class="w-64 h-64"
				src="@/static/tabbar/tab1/seatch-icon.png"
				mode=""
			></image>
			<view
				class="mx-8 w-2 h-14"
				style="background-color: #d9d9d9"
			></view>
			<view class="flex1 px-24">
				<input
					class="w-full fs-26"
					type="text"
					:focus="focus"
					placeholder="搜索推荐"
					v-model="searchKey"
					@focus="() => (showPage = false)"
					@blur="() => (focus = false)"
				/>
			</view>
			<view class="w-42 h-42 br-200 bg-D9D9D9 fd-r jc-c">
				<tm-icon
					:font-size="24"
					name="tmicon-arrow-right"
					color="white"
					@click="HSearch"
				></tm-icon>
			</view>
		</view>

		<block v-if="showPage">
			<block v-for="item in goodList" :key="item.id">
				<view class="z-card p-24 fd-r ai-fs" @click="HGotoDetail(item)">
					<image
						class="w-160 h-200"
						:src="item.mainImg"
						mode=""
					></image>

					<view class="flex1 pl-24">
						<view class="">
							<text class="fs-28 fw-b">
								{{ item.goodsTitle }}
							</text>
						</view>
						<view class="fd-r pt-12">
							<text class="fs-24 c-red">￥</text>
							<text class="fs-32 c-red">
								{{ item.goodsPrice }}
							</text>
						</view>
					</view>
				</view>
			</block>

			<view class="py-32 fd-r jc-c">
				<text class="fs-24 c-grey">没有了~</text>
			</view>
		</block>

		<view v-else class=" pt-24 fd-r fw-w">
			<view class="pb-12 pr-12" v-for="tag in searchList" :key="tag">
				<tm-tag closable size="n" :label="tag" @click="HTagClick(tag)" @close="HTagClose(tag)"></tm-tag>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';

const showPage = ref(false);
const searchList = ref(uni.getStorageSync('good-search-list') || []);

let storeId;
let categoryCode;
const focus = ref(true);
const searchKey = ref('');
// import goodApi from '@/api/goodApi.js';
const pageSize = 10;
const goodList = ref([]); // 右侧商品列表数据
const HGetGoodList = (refresh) => {
	const len = goodList.value.length;
	const pageNum = refresh ? 1 : Math.ceil(len / pageSize) + 1;
	const params = {
		pageNum,
		pageSize,
		shopId: storeId,
		categoryCode,
		search: searchKey.value
	};

	if (storeId) {
		goodApi.getGoodsByChannelCategory(params).then((res) => {
			const arr = res.data.list.map((v) => {
				v.mainImg = JSON.parse(v.goodsPicture)?.pictures[0];
				return v;
			});

			goodList.value = refresh ? arr : [...goodList.value, ...arr];

			showPage.value = true;
		});
	} else {
		goodApi.getGoodsInHome(params).then((res) => {
			const arr = res.data.list.map((v) => {
				v.mainImg = JSON.parse(v.goodsPicture)?.pictures[0];
				return v;
			});

			goodList.value = refresh ? arr : [...goodList.value, ...arr];

			showPage.value = true;
		});
	}
};

const HSearch = () => {
	const idx = searchList.value.findIndex((v) => v == searchKey.value);
	if (idx !== -1) {
		searchList.value.splice(idx, 1);
	}
	if(searchKey.value.trim()) {
		searchList.value.unshift(searchKey.value);
		uni.setStorageSync('good-search-list', searchList.value);
	}

	HGetGoodList(true);
};

const HTagClick = (tag) => {
	searchKey.value = tag;
	HGetGoodList();
}

const HTagClose = (tag) => {
	const idx = searchList.value.findIndex((v) => v == tag);
	searchList.value.splice(idx, 1);
	uni.setStorageSync('good-search-list', searchList.value);
}

onLoad((options) => {
	if (options.name) {
		uni.setNavigationBarTitle({
			title: options.name
		});
	}

	storeId = options.id;
	categoryCode = options.code;
});

onReachBottom(() => {
	HGetGoodList();
});

const HGotoDetail = (item) => {
	uni.navigateTo({ url: `/pages/zone1/goods/index?id=${item.id}` });
};
</script>

<style scoped>
.search-box {
	margin: 24rpx 24rpx 0 24rpx;
	padding-right: 14rpx;
	/* width: 690rpx; */
	height: 66rpx;
	border-radius: 33rpx;
	background-color: white;
	display: flex;
	align-items: center;
}
</style>
